<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>我的购物车</title>
		<link rel="stylesheet" type="text/css"  href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}" />
		<link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}" />
	</head>

	<body>
		<!--导航部分  begin-->
		<div th:replace="common/header :: header"></div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div th:replace="common/carousel :: carousel"></div>
		<!--最顶端轮播图片 end-->

		<!--购物车 begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="col-md-8 col-sm-12">
				<!--左边-->
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的宝贝</a>
					</li>
				</ol>

				<!--购物车表格 begin-->
				<div class="table-responsive" id="imgDiv">
					<table class="table table-hover table-striped" style="vertical-align:middle;">
						<thead>
							<tr>
								<td colspan="8">
									<label class="text-primary">显示条数:</label>
									<select id="cartSzie" class="form-control" style="display: inline" onchange="displaySize(this)">
										<option value="2">2</option>
										<option value="4">4</option>
										<option value="6" selected>6</option>
										<option value="8">8</option>
									</select>
								</td>
							</tr>
							<tr class="text-success success">
								<th><input type="checkbox" id="selectAll" onclick="selectAll(this)"></th>
								<th id="sequence">序号</th>
								<th>图片</th>
								<th>书名</th>
								<th>单价</th>
								<th>数量</th>
								<th>合计</th>
							</tr>
						</thead>
						<tbody id="tby">
							<tr th:each="cart,iter:${cartList}">
								<td><input type="checkbox" name="cks" th:value="${cart.id}"></td>
								<td th:text="${cart.bookId}">1001</td>
								<td><img src="images/tenxunchuan.jpg" th:src="@{'/images/book/' + ${cart.imgUrl}}"></td>
								<td th:text="${cart.bookName}">腾讯传</td>
								<td th:text="${cart.newPrice + '元'}">35.0元</td>
								<td>
									<div class='input-group' style='width: 105px;'>
										<span class='input-group-btn'>
										<button class='btn btn-default' type='button' th:onclick="minus([[${cart.id}]],[[${cart.newPrice}]],[[${iter.index}]])">-</button>
										</span><input type='text' th:id="${'cartCount' + iter.index}" class='form-control' th:value="${cart.count}"><span class='input-group-btn'>
										<button class='btn btn-default' type='button' th:onclick="plus([[${cart.id}]],[[${cart.newPrice}]],[[${iter.index}]])">+</button>
										</span>
									</div>
								</td>
								<td th:text="${cart.newPrice * cart.count}" th:id="${'cartPrice' + iter.index}">100$</td>
							</tr>

						</tbody>
						<tfoot>
							<tr>
								<td colspan="5"></td>
								<td class="text-success">总价:</td>
								<td class="text-success cartPrice" th:text="${session.userCartInfo.totalPrice}">345</td>
							</tr>
							<tr style="background-color: white;">
								<td>
									<a href="index.html" th:href="@{/book/index}" class="btn btn-info">&lt;&lt;继续购买</a>
								</td>
								<td><button class="btn btn-danger" data-toggle="modal" data-target="#myModal" onclick="del()">删除商品</button></td>
								<td colspan="4"></td>
								<td>
									<a href="javascript:void(0)" th:onclick="confirmOrder()" class="btn btn-warning">结算商品</a>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
				<!--购物车 end-->

				<!--删除提示模态框 begin-->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<!--如果没有选中任何一个商品的时候,出现-->
					<div id="first_del" style="display: none;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title text-warning">抱歉!请您先选择商品!</h4>
								</div>
								<div class="modal-body">请选进行勾选!再执行删除删除!</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
					</div>
					<!--first_del  end-->

					<!--如果选中了一个商品的时候,出现-->
					<div id="two_del" style="display: none;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title text-warning">删除商品,慎重操作!</h4>
								</div>
								<div class="modal-body">此操作一旦进行,数据将不可恢复!</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-danger" onclick="delRows(this)">确定删除</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
					</div>
					<!--two_del  end-->

					<!--第三个模态框 开始-->
					<div id="third_del" style="display: none;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title text-warning">抱歉!请您先选择商品!</h4>
								</div>
								<div class="modal-body">请选进行勾选!再执行结算!</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
					</div>
					<!--第三个模态框 开始-->
				</div>
				<!--删除提示模态框 end-->
			</div>

			<!--右边-->
			<div th:replace="common/right :: right"></div>
			<!--右边end-->

		</div>


		<!--首页底部信息 begin-->
		<div th:replace="common/footer :: footer"></div>
		<!--end-->

		<!--引入js文件-->
		<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
		<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
		<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
		<script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
		<script th:inline="javascript">
            //获取应用路径
            var contextPath = [[${#request.getContextPath()}]];
		</script>
		<script type="text/javascript">
			if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
				new WOW().init();
			};

			//修改商品数量
			function minus(cartId,price,index) {
			    //数量减一
				var count = parseInt($("#cartCount"+index).val());
				var _price = parseFloat(price);
				if (count != 1){
                    $("#cartCount"+index).val(count - 1);
                    $("#cartPrice" + index).html((count - 1) * _price);
					updateCart(cartId,count - 1);
				}


            }
            
            //增加数量
			function plus(cartId,price,index) {
                //数量加一
                var count = parseInt($("#cartCount"+index).val());
                var _price = parseFloat(price);
                $("#cartCount"+index).val(count + 1);
                $("#cartPrice" + index).html((count + 1) * _price);
                updateCart(cartId,count + 1);
            }

            //修改后台购物车记录
			function updateCart(cartId,count) {
                $.ajax({
                    url: contextPath + "/cart/update",
                    data:{"id":cartId,"count":count},
                    method:"post",
                    success:function (data) {
						$("#total").html('总价' + data + '元');
						$(".cartPrice").html(data);
                    }
                })
            }
			//确认订单
			function confirmOrder() {
				//存储购物记录的id
				var ids = '';

				//var thirdModel = document.getElementById("third_del");
				//判断是否选择了商品
				var count = 0;
				//获取所有的checkbox
				var cks = document.getElementsByName("cks");
				//遍历
				for(var i = 0; i < cks.length; i++) {
					if(cks[i].checked) {
						count++;
						ids += cks[i].value + ",";
					}
				}
				if(count == 0) {
					alert('请选择图书！');
					// thirdModel.style.display = "block";
					// $("#third_del").css("display","block");
				} else {
					window.location.href = contextPath + '/order/confirm?ids=' + ids.substring(0,ids.length-1);
				}
			}


		</script>
	</body>

</html>